import React, { useState } from 'react';
import { Table, Space, Dropdown, message } from 'antd';
import type { MenuProps } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
import OrderSearch from '@/components/orderSearch';
import { useSelector, useDispatch } from "umi"
import OrderManageUpdate from '@/components/orderManageUpdate';
import OrderInfo from '@/components/orderInfo';
import OrderRecord from '@/components/orderRecord';

type Props = {}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  width: string;
  description: string;
}

const data: DataType[] = [];




// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

const Order = (props: Props) => {
  const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
  const [updateModel, setUpdateModel] = useState<boolean>(false);
  const [openInfo, setOpenInfo] = useState<boolean>(false);
  const [openRecord, seOpenRecord] = useState<boolean>(false);
  const [orderId, setOrderId] = useState<string>('');
  

  const dispatch = useDispatch()
  const orderState = useSelector((state: { order: [],deleteDate:[] }) => {
    //state整个仓库i数据，product是仓库命名空间
    return state.order
  })

  const onClick: MenuProps['onClick'] = ({ key }) => {
    console.log("key", key);
    switch (key) {
      case '1':
        setOpenInfo(true);
        break;
      case '2':
        seOpenRecord(true);
        break;
      case '3':
        dispatch({
          type: "order/deleteManage",
          payload: { _id:orderId }
        })
        
        break;
    }
  };


  //表格操作-更多
  const items: MenuProps['items'] = [
    { key: '1', label: '订单详情' },
    { key: '2', label: '订单记录' },
    { key: '3', label: '删除订单' },
  ];


  const columns: ColumnsType<DataType> = [
    {
      title: '订单号 | 类型',
      // dataIndex: '_id',
      key: '_id',
      width: '100px',
      render: (text) => {
        let type;
        switch (text.order_type) {
          case 0:
            type = "普通订单";
            break;
          case 1:
            type = "拼团订单";
            break;
        }
        return `${text._id} \n ${type}`
      }
    },
    {
      title: '用户昵称 | ID',
      dataIndex: 'user',
      width: '100px',
      key: 'user',
      render: (user) => {
        return `${user.nickname} | ${user._id}`
      }

    },
    {
      title: '商品信息',
      dataIndex: 'goods',
      key: 'goods',
      render: (goods) => {
        return <Space>
          <img style={{ width: "40px", height: '40px' }} src={goods[0].img}></img>
          <span style={{ marginLeft: '5px' }}>{goods[0].title}</span>
          <span style={{ marginLeft: '5px' }}>￥{goods[0].price}*{goods.length}</span>
        </Space>
      }
    },
    {
      title: '实际支付',
      dataIndex: 'pay',
      width: '90px',
      align: 'center',
      key: 'pay_actual',
      render: (pay) => {
        return `${pay.pay_actual}`
      }
    },
    {
      title: '支付状态',
      dataIndex: 'pay',
      width: '110px',
      key: 'pay_type',
      render: (pay) => {
        // 1:微信支付、2:支付宝支付、3:余额支付、4:线下支付
        let type;
        switch (pay.pay_type) {
          case 1:
            type = "微信支付";
            break;
          case 2:
            type = "支付宝支付";
            break;
          case 3:
            type = "余额支付";
            break;
          case 4:
            type = "线下支付";
            break;
        }
        return `${type} `
      }
    },
    {
      title: '支付时间',
      dataIndex: 'pay',
      key: 'pay_time',
      render: (pay) => {
        return `${pay.pay_time}`
      }
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      width: '100px',
      key: 'status',
      render: (status) => {
        // 1:未支付、2:未发货、3:待收货、4:待评价、5:交易完成、6:待核销、7:已核销、-1:仅退款、-2:退货退款、-3:拒绝退款、-4:商品待退货、-5:退货待收货、-6:已退款、-7:已删除
        let type;
        switch (status) {
          case 1:
            type = "未支付";
            break;
          case 2:
            type = "未发货";
            break;
          case 3:
            type = "待收货";
            break;
          case 4:
            type = "待评价";
            break;
          case 5:
            type = "交易完成";
            break;
          case 6:
            type = "待核销";
            break;
          case 7:
            type = "已核销";
            break;
          case -1:
            type = "仅退款";
            break;
          case -2:
            type = "退货退款";
            break;
          case -3:
            type = "拒绝退款";
            break;
          case -4:
            type = "商品待退货";
            break;
          case -5:
            type = "已退款";
            break;
          case -6:
            type = "商品待退货";
            break;
          case -7:
            type = "已删除";
            break;
        }
        return `${type} `
      }
    },
    {
      title: '操作',
      width: '130px',
      dataIndex: '_id',
      key: 'action',
      render: (_id) => (
        <Space size="middle">
          <a onClick={() => update(_id)}>编辑</a>
          <Space>
            <Dropdown menu={{ items, onClick }}>
              <a onClick={() => more(_id)}>
                更多 <DownOutlined />
              </a>
            </Dropdown>
          </Space>
        </Space>
      ),
    },
  ];

  //修改订单
  const update = (_id: string) => {
    //打开模态框
    setUpdateModel(true)
    //状态机获取待修改的商品信息
    dispatch({
      type: "order/updateGood",
      payload: { _id }
    })
  }

  //修改模态框
  const updateClose = (value: boolean) => {
    setUpdateModel(value)
  }

  //更多订单
  const more = (_id: string) => {
    // 保存订单id
    setOrderId(_id)
    //状态机获取待修改的商品信息
    dispatch({
      type: "order/updateGood",
      payload: { _id }
    })
    dispatch({
      type: "order/queryHistory",
      payload: { _id }
    })
  }

  //订单详情模态框
  const infoClose = (value: boolean) => {
    setOpenInfo(value)
  }

    //订单记录模态框
    const recordClose = (value: boolean) => {
      seOpenRecord(value)
    }

    //删除订单
    const deleteOrder=(_id:string)=>{
      dispatch({
        type: "order/deleteManageDate",
        payload: { _id }
      })
    }

  return (
    <>

      <OrderSearch></OrderSearch>

      <Table className='table'
        pagination={{ defaultPageSize: 4 }}
        columns={columns}
        expandable={{
          expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,
        }}
        rowKey="_id"
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        dataSource={orderState.order}
      />

      <OrderManageUpdate updateModel={updateModel} updateClose={updateClose}></OrderManageUpdate>
      <OrderInfo openInfo={openInfo} infoClose={infoClose}></OrderInfo>
      <OrderRecord openRecord={openRecord} recordClose={recordClose}></OrderRecord>


    </>
  )
}

export default Order